import React, { PureComponent } from 'react'
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Divider } from '../../widgets'
import {Element} from "rc-banner-anim";

const anliOneImg = require('../../assets/anli/anli1.jpg')
const anliTwoImg = require('../../assets/anli/anli2.jpg')
const anliThreeImg = require('../../assets/anli/anli3.jpg')
const anliFourImg = require('../../assets/anli/anli4.jpg')

const BgElement = Element.BgElement;

export default class extends PureComponent {
  static defaultProps = {
    className: 'content16',
  };

  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;

  renderCell = (data, idx) => {
    const delay = this.getDelay(idx * 2);
    const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
    const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100,};
    const { img, txt } = data
    return (
      <TweenOne key={idx} className="cell" animation={{ ...childrenAnim}}>
        <img className="cellImage" width="513px" src={img}></img>
      </TweenOne>
    )
  }

  render() {
    const props = { ...this.props };
    const isMode = props.isMode;
    delete props.isMode;
    const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
    const datas = [{
      img: anliOneImg,
      txt: "员工节税"
    }, {
      img: anliTwoImg,
      txt: "股权转让"
    }, {
      img: anliThreeImg,
      txt: "自由职业者"
    }, {
      img: anliFourImg,
      txt: "主播节税"
    }]

    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <OverPack
          className={`content-template ${props.className}`}
          playScale="0.4"
          location={props.id}
        >
          <TweenOne
            key="h1"
            animation={oneAnim}
            component="div"
            className={`${props.className}-tit`}
          >
            <div className={`${props.className}-tit-t`}>行业案例</div>
            <Divider style={{backgroundColor: '#5bb3fa'}}/>
          </TweenOne>
          <div key="xxx" className={`${props.className}-contentWrapper`}>
            <div key="one" className="line">
              {
                this.renderCell({img: anliOneImg}, 1)
              }
              {
                this.renderCell({img: anliTwoImg}, 4)
              }
            </div>
            <div className="line">
              {
                this.renderCell({img: anliThreeImg}, 7)
              }
              {
                this.renderCell({img: anliFourImg}, 10)
              }
              </div>
            </div>
          </OverPack>
      </div>
    )
  }
}
